<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>VisitCali.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Places to visit">
    <meta name="author" content="Jeremy Moyson">

    <!-- Le styles -->
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="../css/visitcali.css" rel="stylesheet">
    <link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="bootstrap/js/html5shiv.js"></script>
    <![endif]-->
    <script>
      
    </script>
  </head>

  <body>
    <?php
    include("function.php");
    init_connect_db();
    $id_place = 1;
    if(isset($_GET['place'])) {
      $id_place = $_GET['place'];
    }
    ?>
          <div class="container">
         <div class="masthead">
          <h1 class="muted">VisitCali.com
          <?php
	//Session a mettre en place
	$user_id = 0;
	$isAdmin = true;
	 session_start();
	if (isset($_SESSION['email']))
	{
	  if (isset($_SESSION['admin'])) {
	     echo ('<a href="user.php"  style="margin:5px" class="btn btn-primary btn-medium pull-right">User Administration</a>');
	  }
	  echo ('<a href="../logout_user.php" style="margin:5px" class="btn btn-primary btn-medium pull-right">Sign-out</a><small style="margin:10px;font-size:0.5em"class="pull-right">'.$_SESSION['email'].'</small>');
	} else {
	  echo ('<a href="#modalSignUp" data-toggle="modal" style="margin:5px" class="btn btn-primary btn-medium pull-right">Sign up</a>');
	  echo ('<a href="#modalLogIn" data-toggle="modal" style="margin:5px" class="btn btn-primary btn-medium pull-right">Log in</a>');
	}
	?></h1>
          <img src="../img/widescreenBanner1.jpg" alt="smiley face"/> 
          <div class="navbar">
            <div class="navbar-inner">
              <div class="container">
                <ul class="nav">
                  <li><a href="../index.php">Home</a></li>
                  <li class="active"><a href="places.php">Places to visit</a></li>
                  <li><a href="dos-donts.php">Do's and don'ts</a></li>
                  <li><a href="faq.php">FAQ</a></li>
                  <li><a href="about.php">About us</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
  
          <div class="row-fluid">
          <div class="span3">
          <form >
            <input type="text" class="search-query" placeholder="Search" title="search">
              <input type="submit" value="" style="display:none" title="search">
          </form>
          <ul class="nav nav-tabs nav-stacked">
            <?php
                  $result = get_title_places();
                   while($place = mysql_fetch_array( $result )) {
                    echo ('<li><a href="http://cis444.cs.csusm.edu/group5/html/places.php?place='.$place['id'].'"><i class="icon-chevron-right"></i>'.$place['title'].'</a></li>');
                   }
            ?>
          </ul>
          </div>
          <div class="span8">
             <?php
                  $result = get_content_places_from_id($id_place);
                   while($place = mysql_fetch_array( $result )) {
                    echo ('
                          <div id="place1" class="PlaceShow well">
                            <h2 style="text-align: center">'.$place['title'].'</h2>
                          <div id="place1Carousel" class="carousel slide">
                            <ol class="carousel-indicators">
                              <li data-target="#place1Carousel" data-slide-to="0" class="active"></li>
                              <li data-target="#place1Carousel" data-slide-to="1"></li>
                            </ol>
                            <!-- Carousel items -->
                            <div class="carousel-inner">
                              <div class="carousel-inner">
                                  <div class="item active">
                                    <img src="../img/places/place'.$id_place.'_1.jpg" alt="'.$place['title'].'">
                                    <div class="carousel-caption">
                                      <h3>'.$place['title'].' 1</h3>
                                      <p>Desc of pics 1</p>
                                    </div>
                                  </div>
                                  <div class="item">
                                    <img src="../img/places/place'.$id_place.'_2.jpg" alt="'.$place['title'].'">
                                    <div class="carousel-caption">
                                      <h3>'.$place['title'].' 2</h3>
                                      <p>Desc of pics 2</p>  
                                    </div>
                                  </div>
                            </div>
                            <!-- Carousel nav -->
                            <a class="carousel-control left" href="#placeCarouselTwo" data-slide="prev">&lsaquo;</a>
                            <a class="carousel-control right" href="#placeCarouselTwo" data-slide="next">&rsaquo;</a>
                          </div>
                          </div>
                          <p>'.$place['article'].'</p>
                          </div>');
                   }
            ?>
            <div class="well">
              <h3>Comments</h3>
               <ul class="media-list">
                <?php
                $result = get_comments_from_place($id_place);
                 while($comment = mysql_fetch_array( $result )) {
                  $user_comment =  get_user_from_id($comment["Users_id"]);
                  $user_comment_info = mysql_fetch_array( $user_comment );
                  $dateComment = explode(" ", $user_comment_info['dateCreate']);
                    echo ('
                          <li class="media">
                            <a class="pull-left" href="#">
                              <img src="http://placehold.it/64x64" alt="tmp">
                            </a>
                            <div class="media-body">
                              <small><i class=icon-user></i> '.$user_comment_info['firstName'].' '.$user_comment_info['lastName'].' - '.$dateComment[0].' </small>
                                  <div class="btn-group pull-right">
                                    <a class="btn btn-mini" href="javascript:alert(\'Message Signaled.\nThank you.\');"><i class="icon-warning-sign"></i>&zwj;</a>
                                  </div>
                                                  <h4 class="media-heading">'.$comment['title'].'</h4>
                                                  '.$comment['content'].'
                                                  <div class="btn-toolbar">
                                  <!--<div class="btn-group">
                                    <a class="btn btn-mini" href="#"><i class="icon-thumbs-up"></i>&zwj;</a>
                                    <a class="btn btn-mini" href="#"><i class="icon-thumbs-down"></i>&zwj;</a>
                                  </div>-->
                              </div>
                            </div>
                          </li>');
                 }
                 if (isset($_SESSION['email']))
              {
                $firstname = $_SESSION['firstname'];
                $lastname = $_SESSION['lastname'];
                echo ('
               <li class="media">
                  <a class="pull-left" href="#">
                    <img src="http://placehold.it/64x64" alt="tmp">
                  </a>
                  <div class="media-body">
                    <small><i class=icon-user></i> '.$firstname.' - '.$lastname.' </small>
                    <form id="form_comment" action="add_comment.php" method="POST">
                    <input type="number" style="display: none" name="placeId" value="'.$id_place.'" />
                    <input type="number" style="display: none" name="userId" value="'.$_SESSION['id'].'" />
                    <h4 class="media-heading"><input type="text" name="title" placeholder="Title" /></h4>
                    <textarea class="span11" name="content" id="contentComment" cols="25" rows="5">Type your comment here.</textarea>
                    <div class="btn-toolbar">
                    <div class="btn-group pull-right">
                      <input class="btn" type="submit" name="submit" value="Submit" />
                    </div>
                    </form>
                    </div>
                  </div>
                </li>');
              }
                ?>
              </ul>
           </div>
          </div>
          <?
          if (isset($_SESSION['admin']))
              {
                if ($_SESSION['admin'] ==  1) {
                echo ('
             <div class="span1">
              <a  href="#addNewPlace" role="button" class="btn" data-toggle="modal"><i class="icon-plus"></i>&zwj;</a>
          </div>');
                }
              }
          ?>
          </div>
       
        <hr>
        <div id="addNewPlace" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3>Add a new place</h3>
          </div>
           <form action="add_new_place.php" method="post" enctype="multipart/form-data">
          <div class="modal-body">
            <?php
             echo '<input type="number" style="display: none" name="userId" value="'.$_SESSION['id'].'" />';
             ?>
            <input class="span2" type="text" name="title" placeholder="title" /><br />
            <input type="file" title="Image 1" name="file" id="file"><br><br />
            <input type="file" title="Image 2" name="img2" id="img2"><br><br />
            <textarea name="article" class="span5" rows="10"></textarea>
              <input class="btn" type="submit" name="submit" value="Submit" />
          </form>
          </div>
          <div class="modal-footer">
            <a href="#" data-dismiss="modal" aria-hidden="true" class="btn">Close</a>
          </div>
        </div>
        
         <div id="modalLogIn" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3>Log in:</h3>
          </div>
           <form action="../login_user.php" method="post">
          <div class="modal-body">
	    <input class="span3" type="email" name="email" placeholder="E-mail" /><br />
	    <input class="span3" type="password" name="password" placeholder="Password" /><br />
              <input class="btn" type="submit" name="submit" value="Submit" />
          </form>
          </div>
          <div class="modal-footer">
            <a href="#" data-dismiss="modal" aria-hidden="true" class="btn">Close</a>
          </div>
        </div>
	
	
    <div id="modalSignUp" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3>Create a account:</h3>
          </div>
           <form action="../add_user.php" method="post">
          <div class="modal-body">
            <input class="span3" type="text" name="firstname" placeholder="Firstname" /><br />
	    <input class="span3" type="text" name="lastname" placeholder="Lastname" /><br />
	    <input class="span3" type="email" name="email" placeholder="E-mail" /><br />
	    <input class="span3" type="password" name="password" placeholder="Password" /><br />
	    <input class="span3" type="text" name="dob" placeholder="Date of Birth AAAA-MM-JJ" /><br />
              <input class="btn" type="submit" name="submit" value="Submit" />
          </form>
          </div>
          <div class="modal-footer">
            <a href="#" data-dismiss="modal" aria-hidden="true" class="btn">Close</a>
          </div>
        </div>
        <div class="footer">
          <p>&copy; Company 2013</p>
        </div>
  
      </div> <!-- /container -->
  

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../bootstrap/js/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap-transition.js"></script>
    <script src="../bootstrap/js/bootstrap-modal.js"></script>
    <script src="../bootstrap/js/bootstrap-file-input.js"></script>
    <script>
   function tooglePlace(id) {
      $(".PlaceShow").hide();
      $(".PlaceShow").addClass("PlaceHide");
      $(".PlaceShow").removeClass("PlaceShow");
      $("#"+id).show();
      $("#"+id).addClass("PlaceShow");
      $("#"+id).removeClass("PlaceHide");
    }
    </script>
  </body>
</html>
